<?php
//Código para el idioma
    if($leng == "en")
    {
        include_once APP_PATH.'libs/en.php';
    }
    else
    {
        include_once APP_PATH.'libs/es.php';
    }
?>

<div><?php  View::content() ?></div> 

<!--SCRIPT DEL NUEVO CARRUSEL-->
<script>
 var posicion = 0;
 var imagenes = new Array();
 $(document).ready(function() {
   var numeroImatges =  <?php echo $contimg+2;?>;
   if(numeroImatges<=3){
       $('.derecha_flecha').css('display','none');
    $('.izquierda_flecha').css('display','none');
   }

     $('.img_carrusel').live('click',function(){
         $('#bigimage').attr('src',$(this).attr('src'));
        return false;
     });

     $('.izquierda_flecha').live('click',function(){
         if(posicion>0){
            posicion = posicion-1;
        }else{
            posicion = numeroImatges-1;
        }
        $(".carrusel").animate({"left": -($('#imagen_'+posicion).position().left)}, 900);
        return false;
     });

     $('.izquierda_flecha').hover(function(){
         $(this).css('opacity','0.5');
     },function(){
         $(this).css('opacity','1');
     });

     $('.derecha_flecha').hover(function(){
         $(this).css('opacity','0.5');
     },function(){
         $(this).css('opacity','1');
     });

     $('.derecha_flecha').live('click',function(){
        if(numeroImatges>posicion+3){
            posicion = posicion+1;
        }else{
            posicion = 0;
        }
        $(".carrusel").animate({"left": -($('#imagen_'+posicion).position().left)}, 900);
        return false;
     });

 });
</script>
<!--ESTILO CSS DEL NUEVO CARRUSEL-->
<style>
#carrusel{ width:300px; overflow:hidden; height:100px; position:relative; margin-top:20px;}
#carrusel .izquierda_flecha{position:absolute; left:30px; z-index:1; top:50%; margin-top:-9px;}
#carrusel .derecha_flecha{position:absolute; right:10px; z-index:1; top:50%; margin-top:-9px;}
.carrusel{width:4000px;left:0px; position:absolute; z-index:0}
.carrusel>div{
    float: left;
    height: 100px;
    margin-right: 5px;
    width: 300px;
    text-align:center;
}
.carrusel .img_carrusel{cursor:pointer;}

#content2 {
    float:left;
    width:290px; /* ancho del carrusel*/
    margin-bottom:40px;
    margin:0px auto;
}
  
</style>

<script type="text/javascript"> //MODAL RECORRIDO
    $(document).ready(function() 
    {
        //ARAY DE MARCADORES PARA EL CALCULO DE RECORRIDO
        var markersArray = [];
        var latlng_cliente = new google.maps.LatLng(<?php echo $latitud; ?>,<?php echo $longitud; ?>)
        
        function clearOverlays() 
        {
            for (var i = 0; i < markersArray.length; i++ ) 
            {
                markersArray[i].setMap(null);
            }
        }
        
        $(".boton-recorrido").click(function()
        {
            //SE MUESTRA EL MODAL
            $("#modal-recorrido").modal('toggle');
            
            
            //Setup del mapa
            var myOptions = {
                zoom: 12,
                center: latlng,
                disableDefaultUI: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map_modal = new google.maps.Map(document.getElementById('map_canvas_recorrido'),
            myOptions);
            //$("#map_canvas_recorrido").css('position','fixed');
            
            
            marker = new google.maps.Marker({
                position: latlng,
                map: map_modal,
                title:" <?php echo $nombre_cliente ?> "
            });
            
            google.maps.event.addListener(map_modal, 'click', function(event) {  //Al hacer click en el mapa...
                
                //alert(event.latLng);
                clearOverlays();
                
                var marker_miubicacion = new google.maps.Marker({
                    position: event.latLng,
                    map: map_modal,
                    title:"Mi ubicación"
                });
                markersArray.push(marker_miubicacion);
                
                //CODIGO DISTANCIA
                var directionDisplay;
                var directionsService = new google.maps.DirectionsService();
                directionsDisplay = new google.maps.DirectionsRenderer();
                
                directionsDisplay.setMap(map_modal);
                directionsDisplay.setPanel(document.getElementById("directionsPanel"));
                $("#directionsPanel").empty();
                
                function calcRoute() 
                {
                    var request = {
                        origin: event.latLng,
                        destination: latlng_cliente,
                        travelMode: google.maps.DirectionsTravelMode.DRIVING
                    };
                    directionsService.route(request, function(response, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                            directionsDisplay.setDirections(response);
                        }
                    });
                    
                    
                }
                
                calcRoute();
                
                //FIN CODIGO DISTANCIA
                
            }); //Fin al hacer click en el mapa
            
        });
    });
</script>

<!--PARA GOOGLE MAPS COMIENZO-->
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
  #map_canvas_recorrido { height: 100% }
</style>
    <?php
         if(Auth::is_valid())
        {?>
            <script type="text/javascript">
                var id_cli = <?php echo $id_cliente?>;
                var id_usu = <?php echo Auth::get("id"); ?>;
                var promedio = <?php echo $calificacion;?>
              </script>
       
  <?php } 
  else //ESTO EN CASO QUE NO ESTE LOGUEADO
     {?>
            <script type="text/javascript">
                var id_cli = -1;
                var id_usu = -1;
                var promedio = <?php echo $calificacion;?>
              </script>
       
  <?php } ?>




<!--eliminar comentario-->
<script type="text/javascript">
    
    
    $(document).ready(function() {
        $('.delete').live( 'click', function() {
        //$('.delete').click(function()// NO FUNCIONABA CUANDO ELIMINA NUEVOS COMENTARIOS
           
            //Recogemos el valor del servicio
            var service = $(this).attr('id');
            
            var dataString = 'id='+service;
            
            $.ajax({
                type: "POST",
                url: "<?php echo PUBLIC_PATH; ?>ajax/eliminar_comentario.php",
                data: dataString,
                success: function() {            
                    //$('#delete-ok').empty();
                    //$('#delete-ok').append('<div>Se ha eliminado correctamente el servicio con id='+service+'.</div>').fadeIn("slow");
                    //$('#'+parent).remove();
                    $('#service'+service).remove();
                }
                
            }); //FIN AJAX
        });                 
    });    
</script>

 <?php echo Tag::js('rating'); ?>
   
 
<script type="text/javascript">
    
    $(document).ready(function () {
        
        $(".boton").click(function (){
        $(".errorVal").remove();
        
        
         if( $(".comentario").val() == "" ){
             $(".comentario").focus().after("<span class='errorVal'><?php echo $cliente_detalle_valcoment; ?></span>");
             return false;
             }
         });
    
    
    //Borrar mensaje de error si el usuario a llenado el campo
    $(".comentario").keyup(function()
    {
        if( $(this).val() != "" )
        {
            $(".errorVal").fadeOut();
            return false;
        }
    });
    
});
    
</script>

<!--
El CSS a continuación da estilo a los mensaje de error en la validación
, no se usó "error" ya que kumbia ya tiene un estilo para esa clase, en su
reemplazo se uso 'errorVal'.
-->
<style>
    .errorVal{
    background-color: #BC1010;
    padding: 6px 12px;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    margin-left: 16px;
    margin-top: 6px;
    position: absolute;
}
.errorVal:before{ /* Este es un truco para crear una flechita */
    content: '';
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #BC1010;
    border-left: 8px solid transparent;
    left: -16px;
    position: absolute;
    top: 5px;
}
.delete {
cursor: pointer;

}
</style>



<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />

<script type="text/javascript" src="https://maps.google.com/maps/api/js?libraries=weather&sensor=false">
//Esto carga el api de Google Maps
</script>

<script type="text/javascript">
//Este código carga el mapa con un marcador en la ubicacion
//del centro turístico
//FUNCTION INITIALIZE
var map;
var latlng = new google.maps.LatLng(<?php echo $latitud; ?>,<?php echo $longitud; ?>)
$(document).ready(function(){

    //Setup del mapa
    var myOptions = {
          zoom: 9,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
    map = new google.maps.Map(document.getElementById('map_canvas'),
            myOptions);
      
  
  marker = new google.maps.Marker({
            position: latlng,
            map: map 
            //,title:
        });
        var calificacion;
 
//AGREGAMOS CAPA DE CLIMA
 var weatherLayer = new google.maps.weather.WeatherLayer({
  temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS
});
weatherLayer.setMap(map);

//NUBES
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map)

});

</script>

<script type="text/javascript"> // SCRIPT CALIFICACION
$(document).ready(function() 
{
    $('#star1').rating("<?php echo PUBLIC_PATH;?>ajax/ingresar_calificacion.php", 
    {
        maxvalue: 5,
        curvalue: <?php echo $calificacion;?>, 
        id:0
    });
});
 
</script>



<!--FORMULARIO DE COMENTARIO-->
<script>

        
    $(document).ready(function(){
	$('#boton-enviar').click(function(event){
            
            event.preventDefault();
            var nombre = $('#nombre').val();
            var comentario = $('#comentario').val();
            if (nombre != '' && comentario != ''){
                $("#comentario").val('');
                $("#mensaje").fadeOut(1000, function(){
                    $.post(
                    "<?php echo PUBLIC_PATH;?>ajax/ingresar_comentario.php", 
                    { nombre: nombre, comentario: comentario,  id_usu: id_usu,  id_cli: id_cli}, 
                    function(data) {
                       
                        $("#comentarios").append(data);  
                        //location.reload();
                        // location.reload();
                        
                        }, 
                        "html");
                        $('#mensaje').text('Comentario agregado!');
			});
                        }
                        else{}
                        
                    });
                    
                        });
 </script>
<!--DISEÑO DEL  LA VISTA DEL CLIENTE -->
 <div class="container-fluid">
  <div class="row-fluid">
    <div class="span8">
        <h4> <?php echo"<font color='#9F9F9F' >".$nombre_cliente."&nbsp;-&nbsp;";?><?php if (isset($ciudad_ubi)) echo $ciudad_ubi."</font> &nbsp;"; echo Html::link('contacto/contacto_cli/'.$id_cliente."/".$leng, Html::img('icon_mail_phone.gif'));?></h4>
      
        <br>

             <!--        IMAGEN PRINCIPAL DEL CENTRO TURÍSTICO -->
        <?php
             
            if (count($contenido) > 0)
            {
                 
               echo "<div class='item'>".Html::img("../default/public/img/upload/".$ruta_con[0],"imagen"," id='bigimage' height='250' width='593' class='img_carrusel'")."</div>";
                   
            
            }  ?>
        <br>
<table class="table table-bordered">  
    <tr>
        <td>
            <!--DIRECCION DEL RECINTO.-->
            <h4><font color="#9F9F9F"><?php echo $cliente_detalle_direccion; ?></font></h4>
           <h6>
            <?php if (isset($region_ubi)) echo $region_ubi; ?><br>
            <?php if (isset($ciudad_ubi)) echo $ciudad_ubi; ?><br>
            <?php if (isset($region_ubi)) echo $direccion_ubi; ?>
            </h6>
            <h4><font color="#9F9F9F"><?php echo $cliente_detalle_telefono; ?></font></h4>
            <h6>
                <?php if(isset ($telefono)) echo $telefono;?>
            </h6>
            
        </td>
        <td>
                <?php 
                if(!Auth::is_valid())
                {
                    echo "<font size='1'><b>".$cliente_detalle_mensaje1."</b></font><br>";
                }
                $calificacion = number_format($calificacion, $decimals = 1);
                echo "<b><h4><font color='#9F9F9F'>".$cliente_detalle_califica."</h4></font></b>"?> <div id="star1" class="rating" style="margin:0px;">&nbsp;</div>
                    <?php echo "<br><br><b><font size='1'>".$cliente_detalle_promedio.": </font><font size='3'>".$calificacion."</font></b><br>
                        <b><font size='1'>Total: </font><font size='3'>".$cantidad."</font></b><br>";
            ?>
                
        </td>
    </tr>
    <tr span="8">
        <td colspan="2">
             
            <div style="text-align: justify">
                 <?php 
             foreach ($array_categorias as $cat)
             {
                if ($leng=="es") echo "<span class='badge badge-success'>".$cat->nombre_cat."</span> ";
                if ($leng=="en") echo "<span class='badge badge-success'>".$cat->nombre_cat_eng."</span> ";
             }  
             ?>
            </div>
            <div style="text-align: right">
            <?php echo  "<span class='label label-info'>".$mostrar.":&nbsp;".$cliente_detalle_visitas."</span><br>"; ?>
            </div>
        </td>
    </tr>


</table>
    </div>
<!--      SEGUNDA PARTE  LAYOUT-->
    <div class="span4" id="segundo_layout">
    <table class="table table-bordered">
        <tbody>
     <tr>  
        <td>
            <div style=" text-align: center"><font size="1"><b><?php echo $cliente_detalle_galeria; ?>:</b><icon class="icon-camera"></icon></font></div>
            <!--Galeria de imagenes-->
            <div id="content2">
            <div id="carrusel">
            <a class="izquierda_flecha" href="#"><i class="icon-arrow-left"></i></a>
            <a class="derecha_flecha"   href="#"><i class="icon-arrow-right"></i></a>
            <div class="carrusel">
            <?php
            for($img = 0; $img<=$contimg-1; $img++)
             {
                $ruta = $ruta_con[$img];
                echo "<div id='imagen_".$img."'>".Html::img("../default/public/img/upload/".$ruta_con[$img],"imagen","class='img_carrusel' width='200px' height='78px' class='img_carrusel'")."</div>";
             }?>
             </div>
            </div>
           </div>
<!--            fin de la galeria-->
         </td>
      </tr>
      <tr>
        <td>
   <!--      LISTADO DE SERVICIOS-->
        <div style="text-align: center"><font size="1"><b><?php echo $cliente_detalle_servicios; ?>&nbsp;</b></font><icon class="icon-thumbs-up"></icon></div>
        <?php
            foreach ($array_servicios as $servicio)
             {
                echo"&#8226;<font size='1'>".Html::link("servicio/detalle/" . $servicio->id."/".$leng,  $servicio->nombre_ser . "</font><br>");
             }  
        ?>
        </td>
     </tr>
     <tr>
        <td>
<!--MAPA DE LA UBICACION-->
        <div style=" text-align:center;"><font size="1"><b><?php echo $cliente_detalle_ubicacion; ?>:</b></font><icon class="icon-map-marker"></icon></div> 
        <div id="map_canvas" style="width:290px; height:290px"></div>
        <button class="btn btn-info span4 boton-recorrido" ><?php echo $cliente_detalle_recorrido; ?></button>
        
        </td>
     </tr>
     </tbody>
     </table>
    </div>
  </div>
 </div>           


<!--SECCION DE COMENTARIOS-->
 <?php 

                if($cont == 0)
                {

                }
                if($cont == 1)
                {?>
     <table class="table table-hover  span12"  style="margin-left: 0px;">

    <?php for ($i = 0; $i <= $contador - 1; $i++) {
        ?>

          
            
                <tr id="service<?= $idComentario[$i] ?>">
                    <td><?php echo "<b>" . $nombre[$i] . "</b>"; ?>
                        <br><div style="text-align: left;"> <?php echo $detalle[$i]; ?> </div>
                    </td>
                    <td style="text-align: right;"><?php
        echo "<b>" . $fecha[$i] . "</b>";
        if (Auth::is_valid()) {
            if (Auth::get("id") == $id[$i] || Auth::get("rol_usu") == "administrador") {
                ?>
                                    <a  class="delete" id="<?= $idComentario[$i] ?>"><i class="icon-remove"></i></a>  
                                <?php }
                            }
                            ?>
                        </td>
                </tr>
           
            
         
    <?php } //fin for ?>
</table>
                         
                

                <?php  }?>        
                <?php 
                    if(!Auth::is_valid())            
                    {
                        echo "<b>".$cliente_detalle_mensaje2."</b>";
                    }
                    else
                    {  
                ?>
                <strong id="mensaje"><?php echo $cliente_detalle_nuevocom; ?> </strong>
                
                        <div id="comentarios" class="">
                           

                                <!-- aca apareceran los nuevos comentarios -->
                           
                        </div>
            
               
                        <!--Formulario de comentario-->
                    <form action="#">
                            <?php echo Form::hidden("nombre",null,$nombre_usuario);?>  
                            <div align="center"> <?php echo Form::text("comentario","class='span3  comentario'"); ?> </div>  
                            <?php echo Form::hidden("id_usu",null,Auth::get("id") ); ?>
                            <?php echo Form::hidden("id_cli", null,$id_cliente) ?>
                            <div align="center"><input id="boton-enviar" type="submit" value="<?php echo $cliente_detalle_boton; ?>" class="btn btn-primary boton" /></div>
                    </form>  

                <?php  }?>

<!-- MODAL DEL CALCULO RECORRIDO-->
<div class="modal hide" id="modal-recorrido" style="width:98%; height: 94%; top:3%; left:1%; margin: 0 0 0 0; overflow: hidden">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Seleccione su ubicaci&oacute;n:</h3>
    </div>
    <div class="modal-body container-fluid" style="">
        <div class="row-fluid">
            <div style="position:fixed; height: 80%; min-height: 400px;" class="span6" >
                <div id="map_canvas_recorrido" class="span11" style="    "></div>
            </div>
            <div id="directionsPanel" class="span6" style=" float: right; line-height: 12px; overflow-y: visible;"></div>
                
        </div>
            
    </div>
        
</div>